<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0 auto;
				padding: 0;
			}
			
			a {
				text-decoration: none;
			}
			
			#dakuang {
				height: 100%;
				width: 100%;
			}
			
			body {
				height: 500px;
				font-size: 12px;
				background-color: #FDFBFE;
				font-family: tahoma, arial, "Hiragino Sans GB", "WenQuanYi Micro Hei", 微软雅黑, 宋体, sans-serif;
			}
			
			.tou {
				height: 50px;
				width: 1000px;
				margin-top: 50px;
			}
			
			.logo1 {
				height: 53px;
				width: 313px;
				background-image: url(img/sprite-hash-91639fdc.png);
				background-position: 0px 0px;
				float: left;
			}
			
			.logo2 {
				height: 28px;
				width: 445px;
				background-image: url(img/sprite-hash-91639fdc.png);
				background-position: -317px 0px;
				float: right;
				margin-top: 12.5px;
			}
			
			.zhong {
				width: 1000px;
				height: 600px;
				background-color: black;
				margin-top: 50px;
				background-image: url(img/57b4bd15bcc545b8b967d1df86589b99.jpg);
			}
			
			.textright {
				width: 374px;
				height: 443px;
				float: right;
				padding-top: 40px;
			}
			
			.text p {
				font-size: 14px;
				line-height: 16px;
				margin-bottom: 15px;
			}
			
			.dengluming {
				border-radius: 3px;
				border: 1px solid #b2b2b2;
				width: 300px;
				height: 34px;
				outline: none;
			}
			
			.woshifenkai {
				height: 25px;
			}
			
			.mima {
				outline: none;
				border-radius: 3px;
				border: 1px solid #b2b2b2;
				width: 300px;
				height: 34px;
				background-color: #FAFFBD;
			}
			
			.denglu {
				width: 140px;
				height: 40px;
				float: left;
				background-color: #F10281;
				border-radius: 5px;
			}
			
			.denglu p {
				text-align: center;
				line-height: 40px;
				color: white;
				font-size: 16px;
			}
			
			.jizhuyonghuming {
				width: 300px;
				height: 19px;
				position: absolute;
				top: 400px;
			}
			/*.yonghuming{height: 400px;}*/
			
			.button {
				height: 19px;
				width: 100px;
				float: left;
			}
			
			.buttons {
				height: 16px;
				width: 16px;
			}
			
			.wjmm {
				float: right;
				border-right: 1px solid gray;
				color: #666666;
			}
			
			.wjmm:hover {
				color: #F10180;
			}
			
			.hezuo {
				color: #666;
			}
			
			.mfzc {
				float: right;
				color: #F10281;
			}
			
			.dingwei {
				position: relative;
				/*top: -20px;*/
				right: -20px;
			}
			
			.xlwbdiv {
				height: 24px;
				width: 24px;
				background-image: url(img/sprite-hash-91639fdc.png);
				background-position: -291px -57px;
				float: left;
				margin-right: 8px;
				margin-top: 8px;
			}
			
			.xlwbdiv1 {
				height: 24px;
				width: 24px;
				background-image: url(img/sprite-hash-91639fdc.png);
				background-position: -263px -57px;
				position: absolute;
				float: left;
				margin-right: 8px;
				margin-top: 8px;
				display: none;
			}
			
			.xlwb:hover .xlwbdiv1 {
				display: block;
			}
			
			.zhifubao {
				height: 24px;
				width: 24px;
				background-image: url(img/sprite-hash-91639fdc.png);
				background-position: -179px -57px;
				float: left;
				margin-right: 8px;
				margin-top: 8px;
			}
			
			.zhifubao2 {
				background-image: url(img/zhifubao.png);
				height: 23px;
				width: 24px;
				display: none;
			}
			
			.zhifubao:hover .zhifubao2 {
				display: block;
			}
			
			.tengxun {
				height: 24px;
				width: 24px;
				background-image: url(img/sprite-hash-91639fdc.png);
				background-position: -235px -57px;
				float: left;
				margin-right: 8px;
				margin-top: 8px;
			}
			
			.tengxun:hover .tengxun2 {
				display: block;
			}
			
			.tengxun2 {
				background-image: url(img/qie.png);
				height: 23px;
				width: 24px;
				display: none;
			}
			
			.weixin {
				height: 24px;
				width: 24px;
				background-image: url(img/sprite-hash-91639fdc.png);
				background-position: -207px -57px;
				float: left;
				margin-right: 8px;
				margin-top: 8px;
			}
			
			.weixin2 {
				background-image: url(img/weixin.png);
				height: 23px;
				width: 24px;
				position: relative;
				top: 1px;
				display: none;
			}
			
			.weixin:hover .weixin2 {
				display: block;
			}
			
			#gengduo:hover {
				color: #F10180;
			}
			
			#gengduo {
				position: relative;
				top: 13px;
				color: gray;
			}
			
			#gengduo img {
				height: 10px;
				width: 10px;
			}
			
			.tfoot {
				color: gray;
				width: 800px;
				text-align: center;
				margin-top: 180px;
			}
			
			.denglu:hover {
				cursor: pointer;
				background-color: rgba(241, 2, 129, 0.8);
			}
			
			#dltext {
				position: absolute;
				top: 530px;
				color: gray;
				display: none;
			}
			
			#dltext a {
				color: gray;
				margin-right: 10px;
			}
			
			#dltext a:hover {
				color: #F10180;
			}
			/*.gengduo1:hover .dltext {
				display: block;
			}*/
			
			#button-1 {
				width: 19px;
				height: 16px;
				background-image: url(img/sprite.png);
				background-position: -48px 0px;
				position: absolute;
			}
			
			#button-2 {
				width: 19px;
				height: 16px;
				background-image: url(img/sprite.png);
				background-position: -24px 0px;
				display: none;
				position: absolute;
			}
			
			#gengduo1 {
				position: absolute;
				top: 0px;
				left: 30px;
			}
			
			#gengduo2 {
				position: relative;
				top: -15px;
				left: 30px;
				display: none;
			}
		</style>
	</head>

	<body>
		<div id="dakuang">
			<div class="tou">

				<div class="logo1">
				</div>

				<div class="logo2">

				</div>
			</div>
			<div class="zhong">
				<div class="textright">
					<div class="text">
						<p>186***...，欢迎回来！请登录</p>
					</div>
					<div class="yonghuming">
						<input type="text" name="" id="" value="18622110031" class="dengluming" />
						<p class="woshifenkai"></p>
						<input type="password" name="" id="" value="18622110031" class="mima" />
						<p class="woshifenkai"></p>
						<div class="denglu">
							<p>登录</p>
						</div>

						<div class="jizhuyonghuming">
							<div class="button">
								<div id="button-1" onclick="dakaile()">
									<div id="button-2"></div>
								</div>
								<p class="dingwei">记住用户名</p>
							</div>

							<a href="#" class="mfzc">&nbsp;免费注册</a>
							<a href="#" class="wjmm"> 忘记密码?&nbsp;</a>
						</div>
						<p class="woshifenkai"></p>
						<p class="woshifenkai"></p>
						<p class="woshifenkai"></p>
						<p class="woshifenkai"></p>
						<p class="woshifenkai"></p>
						<p class="hezuo">合作网站账号登陆:</p>
						<div class="xinlangmen">
							<a href="#" class="xlwb">
								<div class="xlwbdiv1"></div>
								<div class="xlwbdiv"></div>

							</a>
							<a href="#" class="xlwb">
								<div class="tengxun">
									<div class="tengxun2"></div>
								</div>

							</a>
							<a href="#" class="xlwb">
								<div class="zhifubao">
									<div class="zhifubao2"></div>
								</div>
							</a>
							<a href="#" class="xlwb">
								<div class="weixin">
									<div class="weixin2"></div>
								</div>

							</a>
							<div class="gengduo1">
								<a href="#" id="gengduo">更多
									<div id="gengduo1"><img src="img/20180123194131.png"></div>
									<div id="gengduo2"><img src="img/up.png"></div>
								</a>
								<div id="dltext">
									<a href="#">支付宝 |</a>
									<a href="#">建行登陆 | </a>
									<a href="#">人人网 | </a>
									<a href="#">建行登陆 | </a>
									<a href="#">财付通 |<br /></a>
									<a href="#">开心网 |</a>
									<a href="#">中国移动 | </a>
									<a href="#">翼支付 |</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="tfoot">
			<p>Copyright 2008-2017 vip.com，All Rights Reserved ICP证：粤 B2-20080329</p>
		</div>
		<script type="text/javascript">
			var m = 1;
			document.getElementById("gengduo").onclick = function() {
				m++;
				if(m % 2 == 0) {
					document.getElementById("dltext").style.display = "block";
					document.getElementById("gengduo2").style.display = "block";

				} else {
					document.getElementById("dltext").style.display = "none";
					document.getElementById("gengduo2").style.display = "none";

				}
			}

			var n = 1;

			function dakaile() {
				n++
				if(n % 2 == 0) {
					document.getElementById("button-2").style.display = "block"
				} else {
					document.getElementById("button-2").style.display = "none"
				}
			}
		</script>
	</body>

</html>